figure.Dial = new Class({
    Extends: figure.DomFigure,

    initialize: function(id, css, value, unit, min, capacity, step) {
        this.createElement('div',{
            id: id,
            text: value + (unit ? ' ' + unit : ''),
            class: 'indicator unselectable',
            unselectable: 'on',
            css: css
        });
        this.id = id;
        this.element = this.getElement();
        this.capacity = capacity;
        this.unit = unit;
        var formDial = 'form' + id;
        var itemsCount = $('#' + 'control td').length/2;
        var rowsCount = $('#' + 'control tr').length;

        var insertItem = '<td>' + this.getNameForId(formDial) +
            '<td>' + '<input id=\"' + formDial +
            '\" class="dial" style=\"background-color:#f5f7d4\" align="right" type=\"number\" step=\"' + step + '\" name=\"quantity\" min=\"' + min + '\" max=\"'+capacity+'\" size= \"200\" width=\"300\" value=\"' + value + '\">'
            + '</td>'+
            '</td>';

        if (itemsCount % 4 == 0) { //new row
            insertItem= '<tr id=\"'+ rowsCount +'\">' + insertItem + '</tr>';
            $('#control').append(insertItem);
        } else {
            $('#' + (rowsCount-1)).append(insertItem);
        }

        this.controlElement = $('#' + formDial);
        this.controlElement.change({id: id, me: this.controlElement[0], unit: unit}, this.updateDial);
        this.addEvents();
    },

    updateDial: function(event) {
        var dial = $('#' + event.data.id);
        dial.text(event.data.me.value + (event.data.unit ? event.data.unit: ''));
        dial.css('width', DIAL_WIDTH + event.data.me.value.toString().length + event.data.unit.length);
    },
    
    addEvents: function() {
    },

    getValue: function() {
        return this.element.text();
    },

    getName: function() {
        return this.getNameForId(this.id);
    }

});
